<template>
    <div>
        <div class="demo-image">
            <div v-for="(item,index) in list" :key="index" class="block">
                
                <el-image style="width: 250px; height: 250px" :src="item.img" fit="cover" />
                <span class="demonstration hidden" :title="item.name">{{ item.name }}</span>
                <el-row>
                    <el-col :span="10" class="demonstration">￥{{ item.price }}</el-col>
                    <el-col :span="4" class="demonstration"><el-icon @click="routeClick(item.id)"><View /></el-icon></el-col>
                    <el-col :span="4" class="demonstration"><el-icon @click="addCart(item.id)"><ShoppingCart /></el-icon></el-col>
                    <el-col :span="4" class="demonstration"><el-icon @click="addOrder(item.id)"><ShoppingBag /></el-icon></el-col>
                    <el-col :span="2"></el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
import { View,ShoppingCart,ShoppingBag } from '@element-plus/icons-vue';
import { useGoodsStore } from '@/store/goods';
import { ElMessageBox } from 'element-plus'
export default {
    props:['list'],
    components:{
        View,
        ShoppingCart,
        ShoppingBag
    },
    methods: {
        routeClick(val){
            this.data=this.list.find(v=>v.id==val)
            this.$router.push({path:'/detail',query:this.data})
        },
        addCart(val){
            this.data=this.list.find(v=>v.id==val)
            this.store.cartAdd({
                id:val,
                name:this.data.name,
                price:this.data.price,
                onlineprice:this.data.onlineprice,
                num:1,
                total:this.data.onlineprice 
            }) //调用store中的方法
            ElMessageBox.alert('小主，商品已加入，感谢选购！', '亲亲', {
                confirmButtonText: '知道了',
            })
        },
        addOrder(val){
            this.data=this.list.find(v=>v.id==val)//当前的商品复制到数组中
            //打印订单号
            this.orderID=this.time.getFullYear().toString()+(this.time.getMonth()+1).toString()+this.time.getDate().toString()+
                Math.random().toString().slice(2,10)
                //把商品信息添加到订单数组中去
            this.store.orderAdd({
                orderID:this.orderID,
                time:new Date(),
                num:1,
                sum:this.data.onlineprice,
                isOrdered:false,//用来表示订单是否已经被支付的状态标识
                child:[{id:this.data.id,name:this.data.name,price: this.data.price,num:1,onlineprice:this.data.onlineprice,total:this.data.onlineprice}]//如果数组里面只有一条数据，无需进行展开运算符
            })
            ElMessageBox.alert('小主，购买订单已生成~请前往订单页面完成支付！', '亲亲', {
            confirmButtonText: '知道了',
            })
        }
    },
    data() {
        return {
            data:[],
            store:useGoodsStore(),
            time:new Date()
        }
    },
}
</script>

<style scoped>
.demo-image .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 20%;
  box-sizing: border-box;
  vertical-align: top;
}
.demo-image .block:last-child {
  border-right: none;
}
.demo-image .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.hidden{
    width: 200px;
    height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box !important;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    margin: auto;
}
</style>